import React, { PropTypes } from 'react';
import { Breadcrumb,Tree,Table,Button, Form, InputNumber, Input,Select, DatePicker, Col} from 'antd';
const TreeNode = Tree.TreeNode;
const FormItem = Form.Item;
const Option = Select.Option;

import { connect } from 'react-redux'
import { showMask } from '../../action/mask';

import '../less/member.less';
import AddCashierPage from '../window/cashier/AddCashierPage';

const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    index:i+1,
    name:'测试'+i,
    number:`num00${i}`,
    classify:'奢侈品',
    price:Math.random().toFixed(2)*10,
    hangtagPrice:Math.random().toFixed(2)*10,
    evaluater:Math.random().toFixed(2)*100,
    total:Math.random().toFixed(2)*1000,
    scaner:Math.random().toFixed(2)*1000,
    status:'已上架'
  });
}

const pagination = {
  total: data.length,
  showSizeChanger: true,
  onShowSizeChange(current, pageSize) {
    console.log('Current: ', current, '; PageSize: ', pageSize);
  },
  onChange(current) {
    console.log('Current: ', current);
  },
};

class CashierPageList extends React.Component {
  constructor() {
    super();
    this.state = {
    };
  }
  componentDidMount() {

  }
  _getColumn(){
      let _self = this;
      const columns = [{
        title: '编号',
        dataIndex: 'index',
      }, {
        title: '商品码',
        dataIndex: 'number',
      }, {
        title: '商品名称',
        dataIndex: 'name',
      }, {
        title: '商品类别',
        dataIndex: 'classify',
      }, {
        title: '原始价',
        dataIndex: 'price',
      }, {
        title: '挂牌价',
        dataIndex: 'hangtagPrice',
      }, {
        title: '评论人数',
        dataIndex: 'evaluater',
      }, {
        title: '销售额',
        dataIndex: 'total',
      }, {
        title: '浏览人数',
        dataIndex: 'scaner',
      }, {
        title: '状态',
        dataIndex: 'status',
      }, {
        title: '操作',
        dataIndex: 'option',
        render(text,record,index) {
          return <a href="javascript:void(0);" onClick={_self.gotoForm.bind(_self,record,index)}>操作</a>;
        },
      }];
      return columns;
  }
  gotoForm(record,index){
      this.props.changeAdd(false);
  }
  _showUser(record,index){
      this.props.showMask(<AddCashierPage />);
  }
  render() {
    return (
        <div className="containerConten">
          <div className="memHead">
            <Breadcrumb>
              <Breadcrumb.Item>收银结算</Breadcrumb.Item>
              <Breadcrumb.Item>收银管理</Breadcrumb.Item>
              <Breadcrumb.Item>结算界面</Breadcrumb.Item>
            </Breadcrumb>
            <div className="rightOption">
                <ul>
                    <li onClick={this._showUser.bind(this)}>新增商品</li>
                </ul>
            </div>
          </div>
          <div className="memContent">
            <div className="memTable">
                <div className="memTableContent">
                    <div className="memSearch">
                      <Form inline onSubmit={this.handleSubmit}>
                        <FormItem
                          label="商品状态"
                        >
                            <Input placeholder="请输入搜索关键字" />
                        </FormItem>
                        <FormItem
                          label="商品码"
                        >
                            <Input placeholder="请输入搜索关键字" />
                        </FormItem>
                        <FormItem
                          label="商品名称"
                        >
                            <Input placeholder="请输入搜索关键字" />
                        </FormItem>
                        <Button type="primary" htmlType="submit">查询</Button>
                      </Form>
                    </div>
                    <Table columns={this._getColumn()} dataSource={data} pagination={pagination}/>
                </div>
            </div>
          </div>
        </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    maskStatus: state.mask.maskStatus
  }
}

export default connect(
  mapStateToProps,
  { showMask }
)(CashierPageList)
